<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>学生通讯录</title>
  <!-- to enable vue.js, have to add policy 'unsafe-eval' -->
  <meta http-equiv="Content-Security-Policy" content="script-src * 'self' 'unsafe-inline' 'unsafe-eval';" />
</head>

<body style="background: white;">
  <div id='app'>
    <el-container :style="'height: '+winHeight+'; border: 1px solid #eee'">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '1-5']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-menu"></i>菜单</template>
            <el-menu-item-group>
              <template slot="title">基础操作</template>
              <el-menu-item index="1-1" @click="dialogNewFormVisible = true"><i class="el-icon-plus"></i>新增学生信息
              </el-menu-item>
              <el-menu-item index="1-2" @click="edit"><i class="el-icon-edit"></i>编辑学生信息</el-menu-item>
              <el-menu-item index="1-3" @click="deleteSelectedItem"><i class="el-icon-delete"></i>删除选中学生信息
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="高级操作">
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title"><i class="el-icon-s-tools"></i>过滤器</template>
              <el-menu-item-group title="请在在表头筛选">
                <el-menu-item index="1-4-1" @click="resetSexFilter"><i class="el-icon-refresh-right"></i>清除性别过滤器
                </el-menu-item>
                <el-menu-item index="1-4-2" @click="resetMajorFilter"><i class="el-icon-refresh-right"></i>清除专业过滤器
                </el-menu-item>
                <el-menu-item index="1-4-3" @click="resetAllFilter"><i class="el-icon-refresh-left"></i>清除所有过滤器
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="1-5" v-if="!showSearchResult">
              <template slot="title"><i class="el-icon-search"></i>搜索</template>
              <el-menu-item-group tile="搜索类别" v-if="!showSearchResult">
                <el-menu-item index="1-5-1" @click="dialogSearchByNameFormVisible = true"><i
                    class="el-icon-user"></i>名字搜索</el-menu-item>
                <el-menu-item index="1-5-2" @click="dialogSearchByCodeFormVisible = true"><i class="el-icon-info"></i>编号搜索</el-menu-item>
                <el-menu-item index="1-5-3" @click="dialogSearchByPhoneFormVisible = true"><i class="el-icon-phone"></i>手机号码搜索</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-menu-item index="1-6" v-if="showSearchResult" @click="fresh"><i class="el-icon-document"></i>查看全部
            </el-menu-item>
            <el-menu-item index="1-7" @click="backupFile"><i class="el-icon-copy-document"></i>备份</el-menu-item>
            <el-menu-item index="1-8" @click="recovery"><i class="el-icon-receiving"></i>恢复</el-menu-item>
            <el-menu-item index="1-9" @click="showModeChange"><i class="el-icon-connection"></i><span
                v-if="!showInShort">简略</span><span v-if="showInShort">详细</span>显示</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
            </el-dropdown-menu>
            <span>学生通信录</span>
          </el-dropdown>
        </el-header>

        <el-main>
          <el-table ref="Table" :data="tableData" border v-loading="loading" @cell-dblclick="handleEdit"
            @selection-change="handleSelectionChange" :row-style="selectedRow">
                <!-- detail show form -->
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="学生姓名">
                    <span>{{ props.row.name }}</span>
                  </el-form-item>
                  <el-form-item label="学生性别">
                    <span>
                      <el-tag :type="props.row.sex === '男' ? 'primary' : 'success'" disable-transitions>
                        {{ props.row.sex }} </el-tag>
                    </span>
                  </el-form-item>
                  <el-form-item label="学生编号">
                    <span>{{ props.row.code }}</span>
                  </el-form-item>
                  <el-form-item label="学生年龄">
                    <span><el-tag :type="'danger'" disable-transitions>{{ props.row.age }}</el-tag></span>
                  </el-form-item>
                  <el-form-item label="手机号码">
                    <span>{{ props.row.phone }}</span>
                  </el-form-item>
                  <el-form-item label="电子邮箱">
                    <span><a :href="'mailto:'+props.row.email_address">
                        <el-tag :type="'warning'" disable-transitions>{{ props.row.email_address }}</el-tag>
                      </a></span>
                  </el-form-item>
                  <el-form-item label="家庭住址">
                    <span>{{ props.row.address }}</span>
                  </el-form-item>
                  <el-form-item label="专 业">
                    <span>
                      <el-tag :type="tagType(props.row.major)" disable-transitions>{{ props.row.major }}</el-tag>
                    </span>
                  </el-form-item>
                  <el-form-item label="出生日期">
                    <span>{{ formatTime(props.row.date) }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>

            <!-- show in short table columns setting -->
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="code" label="学生编号" width="120" sortable>
              <template slot-scope="scope">
                <span v-if="!(scope.row.editAvailable)"> {{ scope.row.code }} </span>
                <span v-else>
                  <el-input v-model="scope.row.code" @keyup.enter.native="updateData(scope)"/> </span>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="学生姓名" width="120" sortable>
              <template slot-scope="scope">
                <span v-if="!(scope.row.editAvailable)"> {{ scope.row.name }} </span>
                <span v-else>
                  <el-input v-model="scope.row.name"  @keyup.enter.native="updateData(scope)" /> </span>
              </template>
            </el-table-column>
            <el-table-column prop="sex" label="学生性别" width="120" sortable column-key="sex" :filters="[
            {text: '男', value: '男'},
            {text: '女', value: '女'}]" :filter-method="filterSex">
              <template slot-scope="scope">
                <span v-if="!(scope.row.editAvailable)">
                  <el-tag :type="scope.row.sex === '男' ? 'primary' : 'success'" disable-transitions>
                    {{ scope.row.sex }} </el-tag>
                </span>
                <span v-else>
                  <el-select v-model="scope.row.sex" @change="updateData(scope)">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号码" sortable>
              <template slot-scope="scope">
                <span v-if="!(scope.row.editAvailable)">{{ scope.row.phone }}</span>
                <span v-else>
                  <el-input v-model="scope.row.phone"  @keyup.enter.native="updateData(scope)"/> </span>
              </template>
            </el-table-column>
            <el-table-column prop="email_address" label="邮箱地址" sortable>
              <template slot-scope="scope">
                <span v-if="!(scope.row.editAvailable)"><a :href="'mailto:'+scope.row.email_address">
                    <el-tag :type="'warning'" disable-transitions>{{ scope.row.email_address }}
                  </a></el-tag></span>
                <span v-else>
                  <el-input v-model="scope.row.email_address" @keyup.enter.native="updateData(scope)"/> </span>
              </template>
            </el-table-column>
            <el-table-column prop="major" label="学生专业" sortable column-key="major" :filters="[
            {text: '计算机应用', value: '计算机应用'}, 
            {text: '信息安全', value:'信息安全'}, 
            {text: '电子信息', value:'电子信息'}, 
            {text: '网络技术', value: '网络技术'}]" :filter-method="filterMajor">
              <template slot-scope="scope">
                <span v-if="!(scope.row.editAvailable)">
                  <el-tag :type="tagType(scope.row.major)" disable-transitions>
                    {{ scope.row.major }} </el-tag>
                </span>
                <span v-else>
                  <el-select v-model="scope.row.major" @change="updateData(scope)">
                    <el-option label="计算机应用" value="计算机应用"></el-option>
                    <el-option label="信息安全" value="信息安全"></el-option>
                    <el-option label="电子信息" value="电子信息"></el-option>
                    <el-option label="网络技术" value="网络技术"></el-option>
                  </el-select>
              </template>
            </el-table-column>
            <!-- show in detail table columns setting, use myApp.showInShort to control this part show or not -->
            <el-table-column prop="age" label="学生年龄" sortable v-if="!showInShort">
              <template slot-scope="scope">
                <span v-if="!(scope.row.editAvailable)">{{ scope.row.age }}</span>
                <span v-else>
                  <el-input-number v-model="scope.row.age"  @keyup.enter.native="updateData(scope)"/> </span>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="家庭住址" sortable v-if="!showInShort">
              <template slot-scope="scope">
                <span v-if="!(scope.row.editAvailable)">{{ scope.row.address }}</span>
                <span v-else>
                  <el-input v-model="scope.row.address"  @keyup.enter.native="updateData(scope)"/> </span>
              </template>
            </el-table-column>
            <el-table-column prop="date" label="出生日期" sortable v-if="!showInShort">
              <template slot-scope="scope">
                <span v-if="!(scope.row.editAvailable)">{{ formatTime(scope.row.date) }}</span>
                <span v-else>
                  <el-date-picker v-model="scope.row.date" type="date" placeholder="选择日期" @blur="updateData(scope)">
                  </el-date-picker>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
    <!-- new student Form -->
    <el-dialog title="新增学生信息" :visible.sync="dialogNewFormVisible" @keyup.enter.native="insertData">
      <el-form :model="newStudentform">
        <el-form-item label="学生编号" :label-width="formLabelWidth">
          <el-input v-model="newStudentform.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="newStudentform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生性别" :label-width="formLabelWidth">
          <el-select v-model="newStudentform.sex" placeholder="请选择学生性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="newStudentform.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" :label-width="formLabelWidth">
          <el-input v-model="newStudentform.email_address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生专业" :label-width="formLabelWidth">
          <el-select v-model="newStudentform.major" placeholder="请选择学生专业">
            <el-option label="计算机应用" value="计算机应用"></el-option>
            <el-option label="信息安全" value="信息安全"></el-option>
            <el-option label="电子信息" value="电子信息"></el-option>
            <el-option label="网络技术" value="网络技术"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生年龄" :label-width="formLabelWidth">
          <el-input-number v-model="newStudentform.age" autocomplete="off">
            </el-input>
        </el-form-item>
        <el-form-item label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="newStudentform.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker v-model="newStudentform.date" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogNewFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="insertData">确 定</el-button>
      </div>
    </el-dialog>
    <!-- edit student Form -->
    <el-dialog title="编辑学生信息" :visible.sync="dialogEditFormVisible" @keyup.enter.native="updateByID">
      <el-form :model="editStudentform">
        <el-form-item label="学生编号" :label-width="formLabelWidth">
          <el-input v-model="editStudentform.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="editStudentform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生性别" :label-width="formLabelWidth">
          <el-select v-model="editStudentform.sex" placeholder="请选择学生性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="editStudentform.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" :label-width="formLabelWidth">
          <el-input v-model="editStudentform.email_address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学生专业" :label-width="formLabelWidth">
          <el-select v-model="editStudentform.major" placeholder="请选择学生专业">
            <el-option label="计算机应用" value="计算机应用"></el-option>
            <el-option label="信息安全" value="信息安全"></el-option>
            <el-option label="电子信息" value="电子信息"></el-option>
            <el-option label="网络技术" value="网络技术"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生年龄" :label-width="formLabelWidth">
          <el-input-number v-model="editStudentform.age" autocomplete="off">
            </el-input>
        </el-form-item>
        <el-form-item label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="editStudentform.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="出生日期" :label-width="formLabelWidth">
          <el-date-picker v-model="editStudentform.date" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="updateByID">确 定</el-button>
      </div>
    </el-dialog>
    <!-- name search Form -->
    <el-dialog title="通过名字搜索学生" :visible.sync="dialogSearchByNameFormVisible" @keyup.enter.native="searchByName">
      <el-form :model="searchForm">
        <el-form-item label="学生姓名" :label-width="formLabelWidth">
          <el-input v-model="searchForm.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSearchByNameFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="searchByName">确 定</el-button>
      </div>
    </el-dialog>
    <!-- code search Form -->
    <el-dialog title="通过学号搜索学生" :visible.sync="dialogSearchByCodeFormVisible" @keyup.enter.native="searchByCode">
      <el-form :model="searchForm">
        <el-form-item label="学生学号" :label-width="formLabelWidth">
          <el-input v-model="searchForm.code" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSearchByCodeFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="searchByCode">确 定</el-button>
      </div>
    </el-dialog>
    <!-- phone search Form -->
    <el-dialog title="通过手机搜索学生" :visible.sync="dialogSearchByPhoneFormVisible" @keyup.enter.native="searchByPhone">
      <el-form :model="searchForm">
        <el-form-item label="学生手机" :label-width="formLabelWidth">
          <el-input v-model="searchForm.phone" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogSearchByPhoneFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="searchByPhone">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</body>

<script src="src/lib/vue-dev.js"></script>
<!-- <script src="src/lib/vue.js"></script> -->
<script src="src/lib/element.js"></script>
<script src="src/static/js/index.js"></script>
<link rel="stylesheet" href="src/lib/element.css">
<link rel="stylesheet" href="src/static/css/index.css">

</html>